<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            .addBg {
                background: #f00;
                color: #fff;
            }
            .bigger {
                font-size:20px;
            }
        </style>
        <script type="text/javascript" src="jquery/jquery-1.11.3.js"></script>
        
        <script type="text/javascript">
            $(function(){
                //class 71 样式操作
                //添加一个样式 
//                $("thead tr").addClass("addBg").addClass("bigger").removeClass("addBg");
            
                //判断是否存在某个样式
//                alert($("thead tr").hasClass("bigger"));
                
                //鼠标移动过去的时候 
//                $("tbody tr").mouseover(function(){
//                   $(this).addClass("addBg"); 
//                }).mouseout(function() {
//                    $(this).removeClass("addBg");
//                });
//                
                //toggleClass()
                $("tbody tr").mouseover(changeBg).mouseout(changeBg);
                function changeBg() {
                    $(this).toggleClass("addBg");
                }
            });
        </script>
    </head>
    <body>
        
        <table width="700" border="1" align="center" id="tus"></table>
        <table width="700" border="1" align="center" id="users">
            <thead>
                <tr>
                    <td title="id">用户标识</td>
                    <td title="username">用户姓名</td>
                    <td title="age">用户年龄</td>
                    <td title="password">用户密码</td>
                </tr>
            </thead>
            <tbody>
                <tr id="abc">
                    <td>1</td>
                    <td>张三</td>
                    <td>23</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>33</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>13</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>赵六</td>
                    <td>45</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>朱琪</td>
                    <td>21</td>
                    <td>abc123</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
